import { memo, useEffect } from "react";
import { useLocation, useRoutes } from "react-router-dom";
import { Provider } from "react-redux";
import { ThemeProvider } from "styled-components";


import routers from "./routers";
import store from "./store";
import Header from "./components/app-header";
import Footer from "./components/app-footer";
import theme from "./asset/theme";

const App = memo(
  () => {
    
    //切换路径时回到页面的顶部
    const location = useLocation();
    useEffect(() => {
      window.scroll(0, 0);
      console.log(location);
    }, [location]);

    return (
      <div>
          <Provider store = {store}>
          <ThemeProvider theme= {theme}>
          <Header></Header>
          <div className="content">
          {useRoutes(routers)}
          </div>
           <Footer></Footer>
           </ThemeProvider>
          </Provider>
      </div>
    )
  }
)

export default App;